{% extends "base.html" %}

{% block title %}工单审批{% endblock %}

{% block head %}
{{ super() }}
<!-- DataTables -->
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- DataTables button -->
<link rel="stylesheet" href="/static/bower_components/fx/buttons.bootstrap.min.css">
<!-- DataTables searchPanes -->
<link rel="stylesheet" href="/static/bower_components/fx/searchPanes.bootstrap.min.css">
<link rel="stylesheet" href="/static/bower_components/fx/select.bootstrap.min.css">
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    工单审批
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li class="active">工单审批</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">

      <div style="margin-bottom: 10px">
        <button type="button" class="btn btn-success" onclick="window.location.href='/job/type'"><i
          class="fa fa-plus"></i> 新建工单
        </button>
      </div>

      <!--表格1-->
      <div class="box">
        <div class="box-header">
<!--          <h3 class="box-title">公共平台</h3>-->
        </div>
        <div class="box-body">
          <table id="example1" class="table  table-bordered " style="font-size: 90%;width:100%">
            <thead>
            <tr>
              <th>ID</th>
              <th>类型</th>
              <th>申请人</th>
              <th>申请时间</th>
              <th>说明</th>
              <th>审批人</th>
              <th>审批时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            </thead>
<!--            <tbody>-->
<!--            {% for job in result %}-->
<!--            <tr>-->
<!--              <td>{{job.id}}</td>-->
<!--              <td>{{job_type[job.type | string]}}</td>-->
<!--              &lt;!&ndash;                  <td title="{{job.params}}">{{job.params | truncate(50)}}</td>&ndash;&gt;-->
<!--              <td>{{job.creator}}</td>-->
<!--              <td>{{job.create_time}}</td>-->
<!--              <td>{{job.comment}}</td>-->
<!--              <td>{% if job.auditor %} {{job.auditor}} {% endif %}</td>-->
<!--              <td>{% if job.audit_time %} {{job.audit_time}} {% endif %}</td>-->
<!--              <td>{{job_state[job.state | string]}}</td>-->
<!--              <td><a href="/job/{{job.id}}">详情</a></td>-->
<!--            </tr>-->
<!--            {% endfor %}-->
<!--            </tbody>-->
          </table>
          <!--分页-->
          <!--          <nav aria-label="Page navigation">-->
          <!--            <ul class="pagination justify-content-center">-->

          <!--              <li class="page-item">-->
          <!--                {% if page == 1 %}-->
          <!--                <a class="page-link" href="/job/page/1">-->
          <!--                  {% else %}-->
          <!--                  <a class="page-link" href="/job/page/{{page-1}}">-->
          <!--                    {% endif %}-->
          <!--                    上一页-->
          <!--                  </a>-->
          <!--              </li>-->

          <!--              {% for i in range(total) %}-->
          <!--              <li class="page-item {% if page==(i+1) %} active {% endif %}"><a class="page-link"-->
          <!--                                                                               href="/job/page/{{i+1}}">{{i+1}}</a>-->
          <!--              </li>-->
          <!--              {% endfor %}-->

          <!--              <li class="page-item">-->
          <!--                {% if page == total %}-->
          <!--                <a class="page-link" href="/job/page/{{total}}">-->
          <!--                  {% else %}-->
          <!--                  <a class="page-link" href="/job/page/{{page+1}}">-->
          <!--                    {% endif %}-->
          <!--                    下一页</a>-->
          <!--              </li>-->

          <!--            </ul>-->
          <!--          </nav>-->
          <!--分页结束-->
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- DataTables buttons-->
<script src="/static/bower_components/fx/dataTables.buttons.min.js"></script>
<script src="/static/bower_components/fx/buttons.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/jszip.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>-->

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>-->
<script src="/static/bower_components/fx/buttons.html5.min.js"></script>
<!--<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>-->
<script src="/static/bower_components/fx/buttons.colVis.min.js"></script>

<!-- DataTables searchPanes-->
<script src="/static/bower_components/fx/dataTables.searchPanes.min.js"></script>
<script src="/static/bower_components/fx/searchPanes.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/dataTables.select.min.js"></script>


<script>
    $(document).ready(function () {
        var table = $('#example1').DataTable({
            ajax: '/api/v1/job/all',
            columns: [
                {data: 'id'},
                {data: 'type'},
                {data: 'creator'},
                {data: 'create_time'},
                {data: 'comment'},
                {data: 'auditor'},
                {data: 'audit_time'},
                {data: 'd_cpu'},
                {data: 'd_mem'},
                {data: 'd_disk'},
                {data: 'd_net_in'},
                {data: '<a href="/job/">详情</a>'},
            ],
            order: [[1, 'desc']],
            processing: true,
            language: {
                "url": "/static/language.json"
            },
            lengthChange: false,
            scrollX: true,
            responsive: true,
            autoWidth: true,
            stateSave: false,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            columnDefs: [
                {
                    "targets": [],
                    "visible": false,
                }
            ],
        });


        // 根据URL的search参数，自动搜索
        let searchString = getQueryString('search')
        if (searchString !== '') {
            console.log(searchString)
            table.search(searchString);
            table.draw();
        }

        // 解决sidebar toogle之后，datatables标题行错位问题
        $('.sidebar-toggle').click(function () {
            $('.dataTables_scrollHeadInner').css('width', '100%');
            $('#example').css('width', '100%');
            setTimeout(function () {
                table.columns.adjust().draw();
            }, 400);
        });


    });


</script>
{% endblock%}